@()(implicit session: Session)
@english.home.main("Mean Decrease Gini"){

  <style>
    tr{
      text-align: center;
    }

    th{
      text-align: center;
    }
  </style>

  <div class="row">
    <div class="form-group col-sm-12">
      <h2 class="page-heading"
      style="text-align: left;
        border-bottom: 5px solid #e9f3f4">Mean Decrease Gini</h2>
    </div>
  </div>


  <div id="showTable">

    <div id="toolbar"></div>

    <table class="display table table-bordered" id="table" data-search="true"
    data-toolbar="#toolbar" data-search-align="left" data-multiple-search="true"
    data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
    >
      <thead>
        <tr>
          <th data-field="country" data-sortable="true">State</th>
          <th data-field="is_breath" data-sortable="true">Respiratory (droplet) transmission</th>
          <th data-field="is_people" data-sortable="true">Infected person</th>
          <th data-field="is_100" data-sortable="true">Infectious dose less than 100 pathogens</th>
          <th data-field="is_24" data-sortable="true">Pathogens can survive more than 24 hours under natural conditions</th>
          <th data-field="is_medicine" data-sortable="true">No effective treatments</th>
          <th data-field="is_vaccine" data-sortable="true">No effective preventive vaccine</th>
          <th data-field="death" data-sortable="true">Mortality rate（%）</th>
        </tr>
      </thead>
    </table>
  </div>

  <br>
  <br>
  <br>

  <script>

          $(function () {

              $.ajax({
                url:"@routes.RiskController.getGiniJson()",
                type:"post",
                success:function (data) {
                  $("#table").bootstrapTable({data:data})
                }
              })


          });

  </script>


}